<template>
  <div class="showExamine-warp"
       id="showExamine-warp"
       :style="{right:showExamine === tag.value?0:'-350px',width:showExamine === tag.value?'300px':0}">
    <div class="title color-span-bg">
      <span>流程审核</span>
      <el-tooltip placement="top"
                  :content="$t('common.cancel')"
                  :enterable="false">
        <i class="el-icon-close"
           @click="visible = false"></i>
      </el-tooltip>
    </div>
    <informationHeader title="操作">
      <el-form class="info-content">
        <el-form-item :label="$t('processDialog.decision')">
          <el-select v-model="form.lineId"
                     :disabled="cannotEdit">
            <el-option v-for="item in resultOption"
                       :disabled="item.disabled"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('processDialog.decisionOpinion')">
          <div class="unit">
            <el-dropdown @command="(command)=>{form.opinion = command}">
              <span class="el-dropdown-link color-span">
                常用语<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-for="item in pression"
                                  :key="item.id"
                                  :command="item.content">{{item.content}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button @click="showSign = !showSign"
                       type="text">电子签字</el-button>
          </div>
          <el-input v-model="form.opinion"
                    type="textarea"
                    :rows="4"
                    :disabled="cannotEdit"></el-input>
        </el-form-item>
        <el-form-item v-if="form.lineId === 3"
                      label="转办人员">
          <el-select v-model="form.userId">
            <el-option v-for="item in userList"
                       :key="item.userId"
                       :label="item.identityName"
                       :value="item.userId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="showSign">
          <el-image :src="signImage"
                    style="height:150px"></el-image>
        </el-form-item>
        <el-form-item style="text-align:center">
          <el-tooltip placement="top"
                      :content="$t('common.confirm')"
                      :enterable="false">
            <el-button icon="el-icon-check"
                       type="primary"
                       @click="confirm"></el-button>
          </el-tooltip>
          <el-tooltip placement="top"
                      :enterable="false"
                      :content="$t('common.cancel')">
            <el-button icon="el-icon-close"
                       @click="visible = false"></el-button>
          </el-tooltip>
          <el-tooltip placement="top"
                      :enterable="false"
                      content="暂存待办">
            <el-button icon="el-icon-document-checked"></el-button>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </informationHeader>
    <!-- <informationHeader title="消息"
                       v-if="auditList.length === 0">
      <el-form class="info-content">
        <el-form-item label="消息类型">
          <el-input disabled></el-input>
        </el-form-item>
        <el-form-item label="发送人">
          <el-input disabled></el-input>
        </el-form-item>
        <el-form-item label="发送时间">
          <el-input disabled></el-input>
        </el-form-item>
        <el-form-item label="消息内容">
          <el-input disabled
                    type="textarea"></el-input>
        </el-form-item>
      </el-form>
    </informationHeader> -->
  </div>
</template>

<script>
import informationHeader from '../informationHeader'
import { approveBatch, getNodeUser } from '../../api/processManagement/flowInstance'
import { getCommonPression, getSignLoginUser } from '../../api/admin/dict'
import { mapGetters } from 'vuex'

export default {
  components: { informationHeader },
  props: {
    // 单条审核
    tableName: {
      type: String,
      remark: '数据库表名（业务资源实体可以查到）'
    },
    funcTypeId: {
      type: [Number, String],
      remark: '类型ID、对接状态类型组件后自动写入',
      default: ''
    },
    objectId: {
      remark: '单据ID、必传',
      type: [Number,String]
    },
    // 多条审核
    auditList: {
      type: Array,
      remark: '多条数据一起审核、数据结构->{tableName:String,funcTypeId: Number,objectId:Number,busiFuncId:Number}',
      default () {
        return []
      }
    },
    params: {
      type: Object,
      remark: '流程实例对象，单组件需要使用getTaskTodo接口请求'
    },
    reloadFunc: {
      type: Function,
      remark: '自定义刷新方法',
      default () {
        location.reload()
      }
    },
    routePrefix: {
      remark: '当前模块标识（自动获取、对接跨端组件需要传入）',
      type: String,
      default: ''
    },
    warpId: {
      type: String,
      remark: '审核组件弹窗插入dom位置（传入DOM的下方）',
      default: 'sone-container-warp'
    }
  },
  computed: mapGetters(['tag', 'showExamine', 'currentModule', 'typeId']),
  watch: {
    visible () {
      if (this.visible) {
        if (window.parent.document.getElementById(this.warpId).tagName === 'IFRAME') {
          document.body.appendChild(this.$el)
        } else {
          window.parent.document.getElementById(this.warpId).parentNode.appendChild(this.$el)
        }
       // window.parent.document.getElementById(this.warpId).parentNode.appendChild(this.$el)
        this.form.lineId = 1
        this.form.opinion = ''
        this.form.userId = ''
        this.showSign = false
      }
      else this.$el.parentNode.removeChild(this.$el);
      this.$store.commit('SET_SHOWEXAMINE', this.visible ? this.tag.value : false)
      if (this.visible) getNodeUser({ nodeId: this.params.id }).then(res => {
        this.userList = res.data.data
      })
    },
    tag () {
      this.visible = false
      this.$store.commit('SET_SHOWEXAMINE', false)
      try {
        this.$el.parentNode.removeChild(this.$el);
      } catch (error) {

      }
    }
  },
  beforeDestroy () {
    this.visible = false
    this.$store.commit('SET_SHOWEXAMINE', false)
    try {
      this.$el.parentNode.removeChild(this.$el);
    } catch (error) {

    }
  },
  data () {
    return {
      loading: true,
      fileList: [],
      decide: '',
      decideOption: [],
      form: {
        lineId: 1,
        opinion: '',
        userId: ''
      },
      basicTable: [],
      cannotEdit: false,
      userVisible: false,
      userOption: [],
      userObj: [],
      visible: false,
      processOption: [],
      showSign: false,
      signImage: '',
      pression: [],
      userList: [],
      resultOption: [{
        label: '通过',
        value: 1
      }, {
        label: '否决',
        value: 0
      }, {
        label: '已阅',
        value: 2
      }, {
        label: '转办',
        value: 3,
        disabled: this.auditList.length > 0
      }]
    }
  },
  mounted () {
    this.getDict()
  },
  methods: {
    getDict () {
      getCommonPression('decision').then(res => {
        this.pression = res.data.data
        return getSignLoginUser()
      }).then(res => {
        this.signImage = res.data.data.signature
      })
    },
    confirm () {
      if (this.form.lineId === 0 && !this.form.opinion) {
        this.$message.warning('请填写决策意见')
        return
      }
      const data = {
        objList: this.auditList.length > 0 ? this.auditList : [{
          tableName: this.tableName,
          funcTypeId: this.funcTypeId || this.typeId,
          objectId: this.objectId,
          busiFuncId: this.params.busiFuncId,
          instanceId: this.params.instanceId
        }],
        opinion: this.form.lineId,
        remark: this.form.opinion,
        userId: this.form.userId
      }
      approveBatch(this.routePrefix || this.currentModule.routePrefix, data).then(res => {
        this.$message({
          type: res.data.meta.success ? 'success' : 'error',
          message: res.data.meta.message
        })
        this.visible = false
        this.reloadFunc()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  color: #fff;
  padding: 5px 10px;
  span,
  i {
    font-size: 14px;
    cursor: pointer;
  }
}
.info-content {
  padding: 0 10px;
}
.unit {
  display: flex;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
}
.showExamine-warp {
  overflow: hidden;
  position: absolute;
  top: 0;
  background: #fff;
  height: 100%;
  transition: all 0.2s;
  z-index: 1000;
}
</style>
